<template>
  <a-modal ref="modalRef" v-model:open="open" :title="title" width="350px" :footer="null">
    <div class="center-content">
      <a-qrcode :value="signUrl" type="svg" />
    </div>
    <a-input v-model:value="signUrl"/>
  </a-modal>
</template>
<script setup lang="ts">
  import { computed, ref, watch } from 'vue';

  const title ="请使用手机扫描二维码完成签约步骤";//弹窗标题
  const modalRef = ref();//通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false);//控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: []; }>();//通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法
  const signUrl = ref(""); //要修改的记录ID
  
  defineExpose({ show });//暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [显示弹窗] 1. 显示弹窗  */
  function show(url: string) {
    signUrl.value = url;
    open.value = true;
  }


</script>
<style lang="less" scoped>
  .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3vh;
  }
</style>
